<!--
 * @Author: 梁卓
 * @Date: 2022-03-07 22:16:45
 * @LastEditTime: 2022-03-10 11:33:00
 * @LastEditors: Please set LastEditors
 * @Description: 考试试卷
 * @FilePath: \dreamUi\src\views\exam\examTesting.vue
-->
<template>
  <div>
    <div v-show="isOpen">
      <el-card>
        <span>{{ papername === '' ? '暂无考试' : papername }}</span>
        <span style="float: right; font-size: 15px;">剩余时间: {{time}}</span>
      </el-card>
      <el-card>
        <ul class="infinite-list" style="overflow: auto">
          <li
            v-for="(item, index) in allQuestionList"
            :key="index"
            class="infinite-list-item"
          >
            {{ index + 1 }}. {{ item.question }}
            <el-row>
              <el-col
                class="choseArr"
                :span="24"
                v-for="(i, ind) in item.allChose"
                :key="ind"
              >
                <el-radio
                  v-model="item.paperTime"
                  :label="ind"
                  @change="radioChange(ind, item.answer, index)"
                  >{{ i }}</el-radio
                >
              </el-col>
            </el-row>
          </li>
        </ul>
        <el-button type="success" round @click="commitPaper">交卷</el-button>
      </el-card>
    </div>
    <!-- 进行进入前的页面显示 -->
    <div v-show="!isOpen">
      {{isTest === 0 ? '确定要进行测试吗？确定请点击下面的按钮。' : '考试完成,请进入微信小程序查询成绩'}}
      <br/><br/>
      <el-button type="success" icon="el-icon-check" circle @click="changOpen" v-if="isTest === 1 ? false : true"></el-button>
    </div>
  </div>
</template>

<script>
import {timeFomate} from '@/utils/time'
export default {
  name: "DreamuiExamtesting",

  data() {
    return {
      isOpen: false,
      count: 0,
      allQuestionList: [],
      papername: "",
      paperId: '',
      radio: 0,
      sum: 0,
      // 用户选择的选项
      choseArr: [],
      time: 90 * 60,
      startTime: '',
      isTest: 0,
    };
  },

  mounted() {
    this.getTestingInfo();
  },

  methods: {
    changOpen() {
      // 查询用户是否已经进行了测试
      this.$ajax.post(`/scoreInfo/hasTesting/${this.paperId}`).then(res => {
        if (res.data.data > 0) {
          this.$message.error("无法重复测试!");
        } else {
          this.isOpen = true
          // 判断用户是否已经考试
          this.isTest = 1
          this.startTimeInter()
          this.startTime = timeFomate(new Date())
        }
      });
    },
    getTestingInfo() {
      this.$ajax.get("/paperInfo/getAllQuestionsAndChose").then((res) => {
        this.allQuestionList = res.data.data;
        this.papername = res.data.data[0].paperName;
        this.paperId = res.data.data[0].paperId;
      });
    },
    /**ind 为选项的下标 data为正确的答案  index为每个题干的下标（用来解决加分的问题） */
    radioChange(ind, data, index) {
      // 下标映射选型
      let ans = "";
      if (ind === 0) {
        ans = "A";
      } else if (ind === 1) {
        ans = "B";
      } else if (ind === 2) {
        ans = "C";
      } else if (ind === 3) {
        ans = "D";
      } else if (ind === 4) {
        ans = "E";
      } else if (ind == 5) {
        ans = "F";
      }
      // 记录每题的选项
      this.choseArr[index] = ans;
    },
    commitPaper() {
      // 匹配正确答案并计算分数
      this.allQuestionList.forEach((item, index) => {
        if (this.choseArr[index] === item.answer) {
          this.sum += 10;
        }
      });
      const obj = {
        paperId: this.paperId,
        score: this.sum,
        startTime: this.startTime,
        spareTime: this.time / 60
      }
      this.$confirm("确定要提交试卷吗? 提交后将无法修改！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 存入学生信息
          this.$ajax.post('/scoreInfo/addScoreInfo', obj).then(res => {
          }, error => {
            this.$message.error("成绩信息存储失败,请联系管理员");
          });
          this.$message({
            type: "success",
            message: "交卷成功!",
          });
          // 改变打开状态
          this.isOpen = false
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "交卷失败",
          });
        });
    },
    startTimeInter() {
      setInterval(() => {
        if (this.time <= 0) {
          // 跳转
          
        } else {
          this.time --;
        }
        
      }, 1000)
    },
    
  },
};
</script>

<style scoped>
.infinite-list-item {
  /* background-color: aquamarine; */
  margin: 2% 0;
  text-align: left;
}
.choseArr {
  margin: 1% 0;
}
</style>
